<template>
  <div>
    <div class="box">
      <Form
        ref="formValidate"
        :model="formItem"
        :label-width="120"
        :rules="rules"
      >
        <FormItem label="提现银行开户行：" prop="bank_address">
          <Input
            maxlength="32"
            show-word-limit
            type="text"
            v-model="formItem.bank_address"
            placeholder="不超过32字"
            class="input"
          ></Input>
        </FormItem>
        <FormItem label="银行卡号：" prop="bank_code">
          <Input
            maxlength="19"
            show-word-limit
            v-model="formItem.bank_code"
            type="text"
            placeholder="不超过19字"
            class="input"
            number
          ></Input>
        </FormItem>
        <FormItem label="支付宝账号：">
          <Input
            maxlength="32"
            show-word-limit
            v-model="formItem.alipay_account"
            placeholder="不超过32字"
            class="input"
          ></Input>
        </FormItem>
        <FormItem label="支付宝收款码：" class="imgbox">
          <div class="pictrueBox" @click="modalPicTap('dan', 'alipay')">
            <div class="pictrue" v-if="formItem.alipay_qrcode_url">
              <img v-lazy="formItem.alipay_qrcode_url" />
              <Input
                v-model="formItem.alipay_qrcode_url"
                style="display: none"
              ></Input>
            </div>
            <div class="upLoad acea-row row-center-wrapper" v-else>
              <Input
                v-model="formItem.alipay_qrcode_url"
                style="display: none"
              ></Input>
              <Icon type="ios-camera-outline" size="26" />
            </div>
          </div>
        </FormItem>
        <FormItem label="微信账号：">
          <Input
            maxlength="32"
            show-word-limit
            v-model="formItem.wechat"
            placeholder="不超过32字"
            class="input"
          ></Input>
        </FormItem>
        <FormItem label="微信收款码：" class="imgbox">
          <div class="pictrueBox" @click="modalPicTap('dan', 'weixin')">
            <div class="pictrue" v-if="formItem.wechat_qrcode_url">
              <img v-lazy="formItem.wechat_qrcode_url" />
              <Input
                v-model="formItem.wechat_qrcode_url"
                style="display: none"
              ></Input>
            </div>
            <div class="upLoad acea-row row-center-wrapper" v-else>
              <Input
                v-model="formItem.wechat_qrcode_url"
                style="display: none"
              ></Input>
              <Icon type="ios-camera-outline" size="26" />
            </div>
          </div>
        </FormItem>
      </Form>
    </div>
    <Card :bordered="false" dis-hover class="ive-mt save">
      <div class="savebox" @click="save('formValidate')">保存</div>
    </Card>
    <Modal
      v-model="modalPic"
      width="950px"
      scrollable
      footer-hide
      closable
      title="上传商品图"
      :mask-closable="false"
      :z-index="1"
    >
      <uploadPictures
        :isChoice="isChoice"
        @getPic="getPic"
        :gridBtn="gridBtn"
        :gridPic="gridPic"
        v-if="modalPic"
      ></uploadPictures>
    </Modal>
  </div>
</template>

<script>
import { settingApi } from '@/api/capital';
import uploadPictures from '@/components/uploadPictures';
export default {
  name: 'setting',
  components: {
    uploadPictures,
  },
  data() {
    return {
      modalPic: false,
      isChoice: '',
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8,
      },
      gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12,
      },
      picTit: '',
      tableIndex: 0,
      formItem: {
        bank_address: '',
        bank_code: '',
        alipay_account: '',
        alipay_qrcode_url: '', //支付宝
        wechat: '',
        wechat_qrcode_url: '', //微信
      },
      rules: {
        bank_address: [
          {
            validator: (rule, value, callback) => {
              if (!value || value.length >= 4) {
                callback();
              } else {
                callback(new Error('开户行不少于4字'));
              }
            },
            trigger: 'blur',
          },
        ],
        bank_code: [
          {
            validator: (rule, value, callback) => {
              if (
                value === '' ||
                (typeof value === 'number' && value === parseInt(value))
              ) {
                callback();
              } else {
                callback(new Error('银行卡号格式不正确'));
              }
            },
            trigger: 'blur',
          },
        ],
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      settingApi().then((res) => {
        this.formItem.bank_address = res.data.bank_address;
        this.formItem.bank_code = res.data.bank_code;
        this.formItem.alipay_account = res.data.alipay_account;
        this.formItem.alipay_qrcode_url = res.data.alipay_qrcode_url;
        this.formItem.wechat = res.data.wechat;
        this.formItem.wechat_qrcode_url = res.data.wechat_qrcode_url;
      });
    },
    save(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          settingApi(this.formItem, 'post')
            .then((res) => {
              this.$Message.success(res.msg);
            })
            .catch((err) => {
              this.$Message.error(err.msg);
            });
        }
      });
    },
    // 获取单张图片信息
    getPic(pc) {
      switch (this.picTit) {
        case 'weixin':
          this.formItem.wechat_qrcode_url = pc.att_dir;
          break;
        case 'alipay':
          this.formItem.alipay_qrcode_url = pc.att_dir;
          break;
      }
      this.modalPic = false;
    },
    // 点击商品图
    modalPicTap(tit, picTit, index) {
      this.modalPic = true;
      this.isChoice = tit === 'dan' ? '单选' : '多选';
      this.picTit = picTit;
      this.tableIndex = index;
    },
  },
};
</script>

<style scoped lang="less">
/deep/input[type='number'] {
  -moz-appearance: textfield;
}
/deep/input[type='number']::-webkit-inner-spin-button,
/deep/input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
img {
  width: 70px;
  height: 70px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  float: left;
}
.height {
  line-height: 70px;
}
.box {
  background: #ffffff;
  padding: 15px 14px 26px;
  text-align: center;
  display: flex;
  padding-top: 70px;
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  color: rgba(0, 0, 0, 0.85);
  .input {
    width: 400px;
    font-size: 13px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.25);
  }
}
.save {
  border-top: 1px solid #ffffff;
  box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.05);
  .savebox {
    width: 86px;
    height: 30px;
    background: #1890ff;
    border-radius: 2px;
    text-align: center;
    cursor: pointer;
    line-height: 30px;
    color: #ffffff;
    margin: 0 auto;
  }
}
.imgbox {
  text-align: left;

  .pictrueBox {
    width: 70px;
    .pictrue {
      width: 60px;
      height: 60px;
      border: 1px dotted rgba(0, 0, 0, 0.1);
      margin-right: 15px;
      display: inline-block;
      position: relative;
      cursor: pointer;

      img {
        width: 100%;
        height: 100%;
      }

      .btndel {
        position: absolute;
        z-index: 1;
        width: 20px !important;
        height: 20px !important;
        left: 46px;
        top: -4px;
      }
    }
  }

  .upLoad {
    width: 70px;
    height: 70px;
    line-height: 70px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.02);
    cursor: pointer;
  }
}
</style>
